<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="" />
  </head>
  <body>
    <p>
      <button id="start">Start Animation</button>
      <button id="stop">Stop Animation</button>
    </p>
    <div
      id="box"
      style="background: #98bf21; height: 100px; width: 100px; position: relative"
    ></div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
      $(function () {
        $('#start').click(function () {
          $('#box').animate({ height: 300 }, 'slow')
          $('#box').animate({ width: 300 }, 'slow')
          $('#box').queue(function () {
            $(this).css('background-color', 'red')
            $(this).dequeue()
          })
          $('#box').animate({ height: 100 }, 'slow')
          $('#box').animate({ width: 100 }, 'slow')
        })
        $('#stop').click(function () {
          $('#box').clearQueue()
        })
      })
    </script>
  </body>
</html>
